<!doctype html>
<html>
<head>
<meta name="viewport"
	content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
<link rel="stylesheet"
	href="../../stylesheets/google/family.css">
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title>Core Admin Theme</title>
<link href="../../stylesheets/application.css" media="screen"
	rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
  <script src="../../javascripts/vendor/html5shiv.js" type="text/javascript"></script>
  <script src="../../javascripts/vendor/excanvas.js" type="text/javascript"></script>
  <![endif]-->
<script src="../../javascripts/application.js" type="text/javascript"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">

			<div class="area-top clearfix">
				<div class="pull-left header">
					<h3 class="title">
						<i class="icon-plus-sign-alt"></i> Widgets
					</h3>
					<h5>A subtitle can be added here</h5>
				</div>

				<ul class="inline pull-right sparkline-box">

					<li class="sparkline-row">
						<h4 class="blue">
							<span>Orders</span> 847
						</h4>
						<div class="sparkline big" data-color="blue">
							<!--28,26,10,28,10,16,6,13,25,24,29,8-->
						</div>
					</li>

					<li class="sparkline-row">
						<h4 class="green">
							<span>Reviews</span> 223
						</h4>
						<div class="sparkline big" data-color="green">
							<!--6,25,13,9,20,29,18,21,6,6,22,22-->
						</div>
					</li>

					<li class="sparkline-row">
						<h4 class="red">
							<span>New visits</span> 7930
						</h4>
						<div class="sparkline big">
							<!--12,6,12,4,23,29,20,8,15,27,24,25-->
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>

	<div class="container-fluid padded">
		<div class="row-fluid">

			<!-- Breadcrumb line -->

			<div id="breadcrumbs">
				<div class="breadcrumb-button blue">
					<span class="breadcrumb-label"><i class="icon-home"></i>
						Home</span> <span class="breadcrumb-arrow"><span></span></span>
				</div>


				<div class="breadcrumb-button">
					<span class="breadcrumb-label"> <i class="icon-beaker"></i>
						UI Lab
					</span> <span class="breadcrumb-arrow"><span></span></span>
				</div>


				<div class="breadcrumb-button">
					<span class="breadcrumb-label"> <i
						class="icon-plus-sign-alt"></i> Widgets
					</span> <span class="breadcrumb-arrow"><span></span></span>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid padded">
		<!-- find me in partials/action_nav_normal_one_row -->

		<!--big normal buttons-->
		<div class="action-nav-normal">

			<div class="row-fluid">
				<div class="span2 action-nav-button">
					<a href="#" title="New Project"> <i class="icon-file-alt"></i>
						<span>New Project</span>
					</a> <span class="triangle-button red"><i class="icon-plus"></i></span>
				</div>

				<div class="span2 action-nav-button">
					<a href="#" title="Messages"> <i class="icon-comments-alt"></i>
						<span>Messages</span>
					</a> <span class="label label-black">14</span>
				</div>

				<div class="span2 action-nav-button">
					<a href="#" title="Files"> <i class="icon-folder-open-alt"></i>
						<span>Files</span>
					</a>
				</div>

				<div class="span2 action-nav-button">
					<a href="#" title="Users"> <i class="icon-user"></i> <span>Users</span>
					</a>
				</div>

				<div class="span2 action-nav-button">
					<a href="#" title="Friends"> <i class="icon-facebook-sign"></i>
						<span>Friends</span>
					</a>
				</div>

				<div class="span2 action-nav-button">
					<a href="#" title="Followers"> <i class="icon-twitter"></i> <span>Followers</span>
					</a>
				</div>
			</div>

		</div>
		<div class="divider">
			<span></span>
		</div>

		<div class="row-fluid">
			<div class="span12">

				<ul class="chat-box timeline">

					<li class="arrow-box-left gray">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar1.jpg" />
						</div>
						<div class="info">
							<span class="name"> <span class="label label-green">COMMENT</span>
								<strong class="indent">Alex</strong> posted a comment on this
								task: <strong>Core Admin</strong>
							</span> <span class="time"><i class="icon-time"></i> 3 minutes
								ago</span>
						</div>
						<div class="content">
							<blockquote>Lorem ipsum dolor sit amet, consectetur
								adipisicing elit, sed do eiusmod tempor incididunt ut labore et
								dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
								exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Lorem ipsum dolor sit amet, consectetur adipisicing
								elit, sed do eiusmod tempor incididunt ut labore et dolore magna
								aliqua. Ut enim ad minim veniam, quis nostrud exercitation
								ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>
							<div>
								<a href="#"><i class="icon-paper-clip"></i> <b>project_news.docx</b></a>
							</div>
						</div>
					</li>

					<li class="arrow-box-left gray">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar2.jpg" />
						</div>
						<div class="info">
							<span class="name"> <span class="label label-blue">TASK</span>
								<strong class="indent">Alex</strong> completed this task: <strong
								class="strikethrough">Core Admin</strong>
							</span> <span class="time"><i class="icon-time"></i> 6 minutes
								ago</span>
						</div>
					</li>

					<li class="arrow-box-left gray">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar3.jpg" />
						</div>
						<div class="info">
							<span class="name"> <span class="label label-purple">FILE</span>
								<strong class="indent">Michael</strong> added 3 new files in
								project: <strong>Core Admin</strong>
							</span> <span class="time"><i class="icon-time"></i> 12 minutes
								ago</span>
						</div>
						<div class="content">
							<ul class="thumbnails padded">

								<li class="span3"><a href="#" class="thumbnail"> <img
										src="http://placehold.it/240x100" alt="">
								</a></li>

								<li class="span3"><a href="#" class="thumbnail"> <img
										src="http://placehold.it/240x100" alt="">
								</a></li>

								<li class="span3"><a href="#" class="thumbnail"> <img
										src="http://placehold.it/240x100" alt="">
								</a></li>

							</ul>
						</div>
					</li>
				</ul>

				<div class="box closable-chat-box">
					<div class="box-content padded">

						<div class="fields">
							<div class="avatar">
								<img class="avatar-small" src="../../images/avatars/avatar2.jpg" />
							</div>
							<ul>
								<li><b>Add a comment for project <a href="#">Core
											Admin</a></b></li>
								<li class="note">Click on the textarea below to expand it!</li>
							</ul>
						</div>

						<form class="fill-up" action="/">

							<div class="chat-message-box">
								<textarea name="ttt" id="ttt" rows="5"
									placeholder="add a comment (click to expand!)"></textarea>
							</div>

							<div class="clearfix actions">
								<span class="note">An optional note can go here</span>
								<div class="pull-right faded-toolbar">
									<a href="#" class="tip" title="Attach files"><i
										class="icon-paper-clip"></i></a> <a href="#"
										class="btn btn-blue btn-mini">Send</a>
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
		</div>


		<div class="divider">
			<span></span>
		</div>

		<div class="row-fluid">
			<div class="span6">
				<div class="box">
					<div class="box-header">
						<span class="title">News with icons (scrollable!)</span>
						<ul class="box-toolbar">
							<li><span class="label label-green">51</span></li>
						</ul>
					</div>
					<div class="box-content scrollable"
						style="height: 410px; overflow-y: auto">

						<!-- find me in partials/news_with_icons -->

						<div class="box-section news with-icons">
							<div class="avatar blue">
								<i class="icon-ok icon-2x"></i>
							</div>
							<div class="news-time">
								<span>06</span> jan
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">Twitter Bootstrap v3.0 is coming!</a>
								</div>
								<div class="news-text">With 2.2.2 out the door, our
									attention has shifted almost entirely to the next major update
									to the project ...</div>
							</div>
						</div>

						<div class="box-section news with-icons">
							<div class="avatar green">
								<i class="icon-lightbulb icon-2x"></i>
							</div>
							<div class="news-time">
								<span>11</span> feb
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">Ruby on Rails 4.0</a>
								</div>
								<div class="news-text">Rails 4.0 is still unfinished, but
									it is shaping up to become a great release ...</div>
							</div>
						</div>

						<div class="box-section news with-icons">
							<div class="avatar purple">
								<i class="icon-mobile-phone icon-2x"></i>
							</div>
							<div class="news-time">
								<span>04</span> mar
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">All about SCSS</a>
								</div>
								<div class="news-text">Sass makes CSS fun again. Sass is
									an extension of CSS3, adding nested rules ...</div>
							</div>
						</div>


						<div class="box-section news with-icons">
							<div class="avatar cyan">
								<i class="icon-ok icon-2x"></i>
							</div>
							<div class="news-time">
								<span>22</span> dec
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">Twitter Bootstrap v3.0 is coming!</a>
								</div>
								<div class="news-text">With 2.2.2 out the door, our
									attention has shifted almost entirely to the next major update
									to the project ...</div>
							</div>
						</div>



						<!-- find me in partials/news_with_icons -->

						<div class="box-section news with-icons">
							<div class="avatar blue">
								<i class="icon-ok icon-2x"></i>
							</div>
							<div class="news-time">
								<span>06</span> jan
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">Twitter Bootstrap v3.0 is coming!</a>
								</div>
								<div class="news-text">With 2.2.2 out the door, our
									attention has shifted almost entirely to the next major update
									to the project ...</div>
							</div>
						</div>

						<div class="box-section news with-icons">
							<div class="avatar green">
								<i class="icon-lightbulb icon-2x"></i>
							</div>
							<div class="news-time">
								<span>11</span> feb
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">Ruby on Rails 4.0</a>
								</div>
								<div class="news-text">Rails 4.0 is still unfinished, but
									it is shaping up to become a great release ...</div>
							</div>
						</div>

						<div class="box-section news with-icons">
							<div class="avatar purple">
								<i class="icon-mobile-phone icon-2x"></i>
							</div>
							<div class="news-time">
								<span>04</span> mar
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">All about SCSS</a>
								</div>
								<div class="news-text">Sass makes CSS fun again. Sass is
									an extension of CSS3, adding nested rules ...</div>
							</div>
						</div>


						<div class="box-section news with-icons">
							<div class="avatar cyan">
								<i class="icon-ok icon-2x"></i>
							</div>
							<div class="news-time">
								<span>22</span> dec
							</div>
							<div class="news-content">
								<div class="news-title">
									<a href="#">Twitter Bootstrap v3.0 is coming!</a>
								</div>
								<div class="news-text">With 2.2.2 out the door, our
									attention has shifted almost entirely to the next major update
									to the project ...</div>
							</div>
						</div>



					</div>
				</div>
			</div>

			<div class="span6">
				<div class="input-prepend">
					<a class="add-on" href="#"> <i class="icon-search"></i>
					</a> <input type="text" placeholder="Search... (prepended)">
				</div>

				<div class="search-dropdown box">
					<!-- find me in partials/news_with_avatars -->

					<div class="box-section news">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar2.jpg" />
						</div>
						<div class="news-time">
							<span>06</span> jan
						</div>
						<div class="news-content">
							<div class="news-title">
								<a href="#">Twitter Bootstrap v3.0 is coming!</a>
							</div>
							<div class="news-text">With 2.2.2 out the door, our
								attention has shifted almost entirely to the next major update
								to the project ...</div>
						</div>
					</div>

					<div class="box-section news">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar3.jpg" />
						</div>
						<div class="news-time">
							<span>11</span> feb
						</div>
						<div class="news-content">
							<div class="news-title">
								<a href="#">Ruby on Rails 4.0</a>
							</div>
							<div class="news-text">Rails 4.0 is still unfinished, but
								it is shaping up to become a great release ...</div>
						</div>
					</div>

					<div class="box-section news">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar2.jpg" />
						</div>
						<div class="news-time">
							<span>04</span> mar
						</div>
						<div class="news-content">
							<div class="news-title">
								<a href="#">All about SCSS</a>
							</div>
							<div class="news-text">Sass makes CSS fun again. Sass is an
								extension of CSS3, adding nested rules ...</div>
						</div>
					</div>

					<div class="box-section news">
						<div class="avatar">
							<img class="avatar-small" src="../../images/avatars/avatar3.jpg" />
						</div>
						<div class="news-time">
							<span>06</span> jan
						</div>
						<div class="news-content">
							<div class="news-title">
								<a href="#">Twitter Bootstrap v3.0 is coming!</a>
							</div>
							<div class="news-text">With 2.2.2 out the door, our
								attention has shifted almost entirely to the next major update
								to the project ...</div>
						</div>
					</div>
					<div class="box-footer flat">
						<div class="pagination pagination-centered pagination-mini">
							<ul>
								<li><a href="#">Prev</a></li>
								<li><a href="#">1</a></li>
								<li class="active"><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">Next</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>


		<div class="row-fluid">

			<div class="span6">
				<!-- find me in partials/tasks_table -->

				<div class="box">
					<div class="box-header">
						<span class="title">Here be your tasks</span>
						<ul class="box-toolbar">
							<li><span class="label label-green">2 left</span></li>
						</ul>
					</div>
					<div class="box-content">
						<table class="table table-normal">
							<thead>
								<tr>
									<td></td>
									<td>Task</td>
									<td>Done</td>
									<td style="width: 40px"></td>
								</tr>
							</thead>

							<tbody>
								<tr class="status-pending">
									<td class="icon"><i class="icon-exchange"></i></td>
									<td><a href="#">Doing the dew</a></td>
									<td><b>0%</b></td>
									<td>
										<div class="btn-group">
											<button class="btn btn-mini btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="icon-cog"></i>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Action</a></li>
												<li><a href="#">Another action</a></li>
												<li><a href="#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="#">Separated link</a></li>
											</ul>
										</div>
									</td>
								</tr>

								<tr class="status-info">
									<td class="icon"><i class="icon-refresh"></i></td>
									<td><a href="#">Doing some stuff</a></td>
									<td><b>14%</b></td>
									<td>
										<div class="btn-group">
											<button class="btn btn-mini btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="icon-cog"></i>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Action</a></li>
												<li><a href="#">Another action</a></li>
												<li><a href="#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="#">Separated link</a></li>
											</ul>
										</div>
									</td>
								</tr>

								<tr class="status-success">
									<td class="icon"><i class="icon-ok"></i></td>
									<td><a href="#">Build the prototype</a></td>
									<td><b>100%</b></td>
									<td>
										<div class="btn-group">
											<button class="btn btn-mini btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="icon-cog"></i>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Action</a></li>
												<li><a href="#">Another action</a></li>
												<li><a href="#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="#">Separated link</a></li>
											</ul>
										</div>
									</td>
								</tr>

								<tr class="status-info">
									<td class="icon"><i class="icon-refresh"></i></td>
									<td><a href="#">Fixing bugs</a></td>
									<td><b>28%</b></td>
									<td>
										<div class="btn-group">
											<button class="btn btn-mini btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="icon-cog"></i>
											</button>
											<ul class="dropdown-menu">
												<li><a href="#">Action</a></li>
												<li><a href="#">Another action</a></li>
												<li><a href="#">Something else here</a></li>
												<li class="divider"></li>
												<li><a href="#">Separated link</a></li>
											</ul>
										</div>
									</td>
								</tr>


							</tbody>
						</table>
					</div>
				</div>


				<!-- find me in partials/stats_table -->

				<div class="box">
					<div class="box-header">
						<span class="title">Here be your stats</span>
						<ul class="box-toolbar">
							<li><span class="label label-blue">189</span></li>
						</ul>
					</div>
					<div class="box-content">
						<table class="table table-normal">
							<thead>
								<tr>
									<td></td>
									<td>Item</td>
									<td>Stats</td>
								</tr>
							</thead>

							<tbody>
								<tr>
									<td style="width: 60px;"><div class="sparkline">
											<!--5,10,15,20,18,16,14,20,15,16,12,10-->
										</div></td>
									<td style="text-align: center;"><i class="icon-user"></i>
										Visitors</td>
									<td class="status-error"><i class="icon-circle-arrow-down"></i>
										-5%</td>
								</tr>

								<tr>
									<td style="width: 60px;"><div class="sparkline"
											data-color="green">
											<!--5,6,8,14,18,10,12,16,15,16,12,15-->
										</div></td>
									<td style="text-align: center;"><i
										class="icon-comments-alt"></i> Comments</td>
									<td class="status-success"><i class="icon-circle-arrow-up"></i>
										+10%</td>
								</tr>

								<tr>
									<td style="width: 60px;"><div class="sparkline">
											<!--15,16,8,14,18,10,14,16,15,16,12,10-->
										</div></td>
									<td style="text-align: center;"><i class="icon-bell"></i>
										Events</td>
									<td class="status-error"><i class="icon-circle-arrow-down"></i>
										-15%</td>
								</tr>

								<tr>
									<td style="width: 60px;"><div class="sparkline"
											data-color="green">
											<!--8,11,12,23,14,16,12,18,15,16,12,20-->
										</div></td>
									<td style="text-align: center;"><i class="icon-money"></i>
										Income</td>
									<td class="status-success"><i class="icon-circle-arrow-up"></i>
										+20%</td>
								</tr>

							</tbody>
						</table>


					</div>
				</div>


			</div>

			<div class="span6">

				<div class="box">

					<div class="box-header">
						<ul class="nav nav-tabs nav-tabs-left">
							<li class="active"><a href="#home" data-toggle="tab"><i
									class="icon-home"></i></a></li>
							<li><a href="#messages" data-toggle="tab"><i
									class="icon-comments-alt"></i> <span>Messages</span></a></li>
							<li><a href="#settings" data-toggle="tab"><i
									class="icon-cog"></i> <span>Settings</span></a></li>
						</ul>

						<div class="title">Settings</div>
					</div>

					<div class="box-content">
						<div class="tab-content">
							<div class="tab-pane active" id="home">
								<ul class="box-list">

									<li><span><i class="icon-user"></i> Allow user
											registration</span> <span class="pull-right"> <input
											class="iButton-icons-tab" type="checkbox" checked="checked" />
									</span></li>

									<li><span><i class="icon-money"></i> Auto accept
											new orders</span> <span class="pull-right"> <input
											class="iButton-icons-tab" type="checkbox" />
									</span></li>

									<li><span><i class="icon-upload"></i> Allow user
											uploads</span> <span class="pull-right"> <input
											class="iButton-icons-tab" type="checkbox" checked="checked" />
									</span></li>

									<li>
										<p class="text-center">
											Upload Max Size <span class="upload-max-size">40 MB</span>
										</p>
										<div class="hpadded">
											<div class="ranged-slider-ui step"></div>
										</div>
									</li>

								</ul>
							</div>

							<div class="tab-pane" id="messages">
								<ul class="box-list">
									<li><span><i class="icon-envelope"></i> Alert
											incoming messages</span> <span class="pull-right"> <input
											class="iButton-icons-tab" type="checkbox" checked="checked" />
									</span></li>

									<li><span><i class="icon-reply"></i> Auto Reply on
											leave</span> <span class="pull-right"> <input
											class="iButton-icons-tab" type="checkbox" checked="checked" />
									</span></li>
								</ul>
							</div>

							<div class="tab-pane" id="settings">

								<ul class="box-list">
									<li><span><i class="icon-user"></i> MOAR</span> <span
										class="pull-right"> <input class="iButton-icons-tab"
											type="checkbox" checked="checked" />
									</span></li>

									<li><span><i class="icon-money"></i> SETTINGS</span> <span
										class="pull-right"> <input class="iButton-icons-tab"
											type="checkbox" />
									</span></li>

									<li><span><i class="icon-upload"></i> HERE</span> <span
										class="pull-right"> <input class="iButton-icons-tab"
											type="checkbox" checked="checked" />
									</span></li>
								</ul>

							</div>
						</div>

						<div class="box-footer padded">
							<span class="pull-right"> <a href="#"
								class="btn btn-blue btn-small">Save</a> <a href="#"
								class="btn btn-default btn-small">Cancel</a>
							</span>
						</div>
					</div>

				</div>

				<!-- find me in partials/small_chat -->

				<div class="box">
					<div class="box-header">
						<div class="title">Chat box</div>
					</div>

					<div class="box-content">

						<ul class="chat-box">

							<ul class="chat-box">

								<li class="arrow-box-left">

									<div class="avatar">
										<img class="avatar-small"
											src="../../images/avatars/avatar1.jpg" />
									</div>
									<div class="info">
										<span class="name"><strong>Michael</strong> <span
											class="badge badge-blue">designer</span></span> <span class="time">8
											minutes ago</span>
									</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
									do eiusmod tempor incididunt ut labore et dolore magna aliqua.

								</li>

								<li class="divider"></li>

								<li class="arrow-box-right gray">
									<div class="avatar">
										<img class="avatar-small"
											src="../../images/avatars/avatar2.jpg" />
									</div>
									<div class="info">
										<span class="name"><strong>Alex</strong> <span
											class="badge badge-gray">developer</span></span> <span class="time">3
											minutes ago</span>
									</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
									do eiusmod tempor incididunt ut labore et dolore magna aliqua.
								</li>

							</ul>

						</ul>
					</div>
					<p class="note text-center">Last message received at 14:55</p>
					<hr class="divider">
					<div class="box-footer flat padded">
						<!-- chat send message module. you can use it with or without a form/submit button or just a link -->
						<form>
							<div class="input-append">
								<input type="text"
									placeholder="Standard bootstrap append input here" />
								<ul class="add-on">
									<li><a href="#"><i class="icon-paper-clip"></i></a></li>
									<li>
										<button class="btn btn-blue">Send</button>
									</li>
								</ul>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>